<template>
	<view>
		<view class="u-padding-20">
			<u-search v-model="keyword" placeholder="请输入商品名称" :show-action="true" action-text="搜索" :animation="true" @search="search" @custom="search"></u-search>
		</view>
		<view class="top_titlelist" style="">
			<scroll-view scroll-x="true" @scroll="scroll">
				<view class="scroll-list" style="flex-direction: row;">
					<view class="scroll-list__goods-item" v-for="(item, index) in topics" :key="index" :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click.stop="tocheck(item.id)">
						<image class="scroll-list__goods-item__image" mode="aspectFill" :src="item.image"></image>
						<text :style="{color:item.id==tid?'#0B868E':''}" class="scroll-list__goods-item__text">{{ item.name }}</text>
					</view>
					<u-toast ref="uToast"></u-toast>
				</view>
			</scroll-view>
		</view>
		
		<view>
			<u-empty :show="showEmpty" iconSize="300" marginTop="30" src="https://resourse.cnlhjt.com/upload/20220824/d435ba6ccf8ec8547f6c10b4dbfa1b2d.png">
			</u-empty>
			<view class="con_list u-border-bottom u-rela" v-for="(item,index) in list" :key="index" @click="togoodsDetail(item.id)">
				<view v-if="item.status==0" style="color:#00aa00;font-size: 26rpx;" class="u-abso pos_right">已上架</view>
				<view v-else style="color:#ff5500;font-size: 26rpx;" class="u-abso pos_right">已下架</view>
				<image :src="item.images[0]" mode="aspectFill"></image>
				<view class="dis_inl_blo con_intro">
					<view class="title_name">{{item.content}}</view>
					<view class="person_con">
						<text>所属分类：<text style="color:#008987;">{{item.theme}}</text></text>
						<!-- <text class="u-margin-left-20">{{item.name}}</text> -->
					</view>
					<view class="price u-abso">
						<text>报价：<text style="color:red;font-size:32rpx;">￥{{item.price}}</text></text>
						<text class="time u-abso pos_right">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTopic,
		getLatticeList,
		searchLatticeGoods
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				topics: [],
				page:2,
				limit:10,
				keyword:'',
				tid:99,
				list: [],
				showEmpty:false
			}
		},
		onLoad() {
			getTopic({
				page: 1,
				limit: 10
			}).then(this.getTopic);
			
		},
		onShow() {
			getLatticeList().then(this.getLatticeList);
		},
		onReachBottom() {
			getLatticeList({
				tid:this.tid,
				page: this.page,
				limit: this.limit
			}).then(res=>{
				// console.log(res);
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						this.list = e.result;
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		methods:{
			
			getTopic(e) {
				if (e.code == 200) {
					let list = e.result;
					list.forEach((item) => {
						this.topics.push(item);
					})
				} 
			},
			getLatticeList(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.list = e.result;
				} else{
					this.showEmpty = true;
					this.list=[]
				}
			},
			search:function(){
				searchLatticeGoods({
					keyword:this.keyword
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.list=res.result
					}else{
						this.showEmpty = true;
						this.list=[]
					}
				})
			},
			tocheck:function(id){
				this.tid=id;
				getLatticeList({
					tid:id
				}).then(this.getLatticeList);
			},
			scroll:function(){},
			togoodsDetail:function(id){
				uni.navigateTo({
					url:'./goodsDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.top_titlelist{
		width:95%;
		margin:0 auto;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15); 
		border-radius: 10rpx;padding-top: 20rpx;
	}
	.scroll-list {
		margin-left: 20rpx;
		display: flex;
		padding:15rpx 0;
		&__goods-item {
			display: inline-block;
			margin: 0 20rpx;
			text-align: center;
			// padding:0 15rpx;
			width:150rpx !important;
			&__image {
				width:100rpx;
				display: block;
				height: 80rpx;
				border-radius: 4px;
				margin:0 auto;
			}
	
			&__text {
				color: #333;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
				
			}
		}
	}
	.con_list{
		padding:20rpx;
	}
	.con_list image{
		width:25%;
		height:180rpx;
		border-radius: 10rpx;
		vertical-align: top;
	}
	.con_intro{
		width:70%;
		margin-left:15rpx;
		vertical-align: top;
	}
	.person_con{
		margin-top:10rpx;
		font-size: 26rpx;
		color:#666;
	}
	.title_name{
		width:80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price{
		width:70%;
		bottom:20rpx;
		font-size: 28rpx;
	}
	.time{
		font-size: 24rpx;
		color:#666;
	}
</style>
